<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .big{
            width: 1000px;
            position: absolute;
            left: 0;
            right: 0;
            top: 100px;
            margin: auto;
        }
        h3{
            color: #666666;
            margin-left: 480px;
            margin-bottom: 50px;
        }
        td{
            width: 250px;
        }
        .tp{
            width: 100px;
            height: 100px;
            float: left;
        }
        tr td:nth-child(2){
            width: 800px;
        }
    </style>
</head>
<body>
    <div class="big" style="border: 1px solid #666666;">
        <h3>确认订单</h3>
        <table>
            <thead align="center">
                <tr>
                    <td>序号</td>
                    <td>商品信息</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody align="center">
            </tbody>
            <tfoot align="right">
                <tr>
                    <td colspan="6"><p style="margin-right: 50px; margin-top: 25px; margin-bottom: 25px;">共<a>22</a>件商品，商品合计: <b style="color: red;">¥1234.00</b></p></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
<script>
    var b=document.querySelector('b')
    var sum=0
    var a=document.querySelector('a')
    var num=0
    var data=[
        {
            src:'../01/img/榴莲.png',
            xx:'共享品茶乐趣公道杯闻香杯手工吹制',
            gg:'规格：公道杯230ml/手工吹制',
            dj:89,
            num:10
        },
        {
            src:'../01/img/火龙果.png',
            xx:'祛味除腥神器，不锈钢除味皂',
            gg:'规格：不锈钢厨卫皂',
            dj:9.9,
            num:1
        },
        {
            src:'../01/img/荔枝.png',
            xx:'一锅包揽煎烤蒸煮日本爱丽丝多功能料理锅',
            gg:'颜色：芭比粉-老款',
            dj:299,
            num:2
        },
        {
            src:'../01/img/樱桃.png',
            xx:'茶水分离杯耐热隔热玻璃杯',
            gg:'规格：黑白对杯',
            dj:188,
            num:5
        },
        {
            src:'../01/img/鸭梨.png',
            xx:'儿童防污/防蚊T恤110cm',
            gg:'颜色：白色草莓(防污) 尺码：160cm',
            dj:89,
            num:4
        }
    ]
    var tb=document.querySelector('tbody')
    for(i=0;i<data.length;i++){
        var tr=document.createElement('tr')
        tr.innerHTML=`
                    <td>${i+1}</td>
                    <td><img class="tp" src="${data[i].src}"><p style="margin-top: 25px;">${data[i].xx}<br><samp>${data[i].gg}</samp></p></td>
                    <td>¥${data[i].dj.toFixed(2)}</td>
                    <td>${data[i].num}</td>
                    <td style="color: red;">¥${(data[i].dj*data[i].num).toFixed(2)}</td>
                    <td><span style="color:green;" onclick='sc(this)'>删除</span></td>
        `
        tb.appendChild(tr)
        sum+=data[i].dj*data[i].num
        num+=data[i].num
    }
    b.innerHTML=sum.toFixed(2)
    a.innerHTML=num
    function sc(aaa){
        tb.removeChild(aaa.parentNode.parentNode)
    }
</script>